﻿@{
    Layout = null;
}
@using ZBJF.Warranty.BLL
@using ZBJF.Warranty.Common.Enums
@model ZBJF.Warranty.Model.SellerInsuranceProducts
<h4>上传产品图片及简介</h4>
<div style="height: 250px; border: 1px solid #ddd; padding: 10px;" id="material">
    <div style="width: 60%; border: 1px solid rgb(215, 215, 215); float: left; padding-bottom: 30px;">
        <p style="margin: 8px;">上传商品图片</p>
        <ul id="img" style="list-style: none;">
            @if (Model != null)
{
    foreach (var item in Model.SellerInsuranceProductImages)
    {
        <li style="position: relative;" class="canvas">
            <img src="@item.FilePath" class="product-img">
            <input type="hidden" name="SellerInsuranceProductImages" value="@item.FilePath" />
            <i class="product-img-remove icon-remove" onclick="DdRemove(this)"></i>
        </li>
    }
}
            <li id="img1" style="position: relative; top: 16px;">
                <div id="uploadDiv" style="border: 2px dashed #cec3c3; width: 118px; height: 118px; text-align: center; line-height: 120px; font-size: 60px; cursor: pointer;">
                    <span name="ImageType" multiple="multiple">+</span>
                </div>
                <input type="file" id="inputfile" onchange="fileChange(this)" style="display: none" />
            </li>
        </ul>
    </div>
    <div style="width: 36%; height: 290px; float: right;">
        <dl id="dl_add" style="margin-top: -5px; margin-left: 60px;">
            <dt>
                <input type="text" placeholder="请输入标签，每个商品最多可以添加三个标签" maxlength="10" style="Width: 280px;" id="TagName" />
                <a id="AddTag" class="btn btn-xs btn-primary" data-toggle="modal" href="" title="添加">
                    <i class="icon-plus-sign bigger-130"></i>
                </a>
            </dt>
            @if (Model != null)
            {
                foreach (var item in Model.SellerInsuranceProductTags)
                {
                    <dd>
                        <button class="ProductTag">
                            @item.TagName
                        </button>
                        <input type="hidden" name="SellerInsuranceProductTags" value="@item.TagName" />  
                        <a class='btn btn-xs btn-primary margin-t-20' data-toggle='modal' onclick='DdRemove(this)' title='删除' style='margin-left: 30px;'><i class='icon-minus-sign bigger-130' style='width: 50px;'></i></a>
                    </dd>
                }
            }
        </dl>
    </div>
</div>
<div style="width: 98%;">
    <!--style给定宽度可以影响编辑器的最终宽度-->
    <script type="text/plain" id="myEditor" style="width: 98%; height: 300px;">
    </script>
    <script type="text/javascript">
       
        var Binding = function () {
            $("#img li[id='img1']").siblings("li").mouseover(function () {
                $(this).children("img").next().show();
                event.stopPropagation();
            }).mouseout(function () {
                $(this).children("img").next().hide();
                event.stopPropagation();
            });
        }

        function fileChange(e) {
            var f = e.files[0];
            if (f.size > 2048 * 1024) {
                alert("超过最大图片限制(2M)");
                return;
            }
            var fr = new FileReader();
            fr.readAsDataURL(f);
            fr.onload = function (f) {
                compressImg(this.result, 200, function (data) {
                    var html = "<li style='position:relative;'><img class='product-img' src='" + data + "'>";
                    html += "<input type='hidden' name='SellerInsuranceProductImages' value='" + data + "'/>";
                    html += "<i class='product-img-remove icon-remove' onclick='DdRemove(this)'></i></li>";
                    $("#img1").before(html);
                    Binding();
                });
            };
        }

        function DdRemove(obj) {
            $(obj).parent().remove();
        }

        $(function() {
            Binding();
            $("#uploadDiv").on("click", function () {
                var imglenght = $("#img li").length;
                if (imglenght <10) {//最多允许上传9张
                    var div1 = document.getElementById('material');
                    if (imglenght > 4) {
                        div1.style.height = "360px";
                    } else {
                        div1.style.height = "250px";
                    }
                    $("#inputfile").trigger("click");
                } else {
                    layer.msg("最多上传九张");
                    $("#inputfile").unbind("click");
                }
            });

            ///添加标签
            $("#AddTag").click(function () {
                if ($("#dl_add dd").each(function () {
                }).length > 2) {
                    layer.alert("只能添加3个标签");
                    return false;
                }
                var tagName = $("#TagName").val().trim();
                if (tagName == "") {
                    layer.alert("请填写标签");
                    return false;
                }
                var status = false;
                $("dl[id='dl_add']").children("dt").siblings("dd").each(function () {
                    if ($(this).children("button").text() == tagName) {
                        status = true;
                    }
                });
                if (status) {
                    layer.alert("不能填写相同标签");
                    return false;
                }

                var html = "<dd><button class='ProductTag'>" + tagName + "</button><input type='hidden' name='SellerInsuranceProductTags' value=" + tagName + " /><a class='btn btn-xs btn-primary margin-l-30 margin-t-20'";
                html += "data-toggle='modal' onclick='DdRemove(this)' title='删除'><i class='icon-minus-sign bigger-130'></i></a></dd>";
                $("#dl_add").append(html);
                $("#TagName").val("");
            });
        });

    </script>
</div>